import  React,{Component} from 'react'
import { ListView } from 'antd-mobile';
import axios from '../../util/axios'
import './style.scss'

const NUM_ROWS = 20;
let pageIndex = 0;

class SuperListView extends React.Component {
  constructor(props) {
    super(props);
    const dataSource = new ListView.DataSource({
      rowHasChanged: (row1, row2) => row1 !== row2,
    });

    this.state = {
      dataSource,
      data:[],
      isLoading: true,
      isRefreshing:false,
      isNoData:false,
      isFirst:true,
      isLoadingMoreData:false,
      isFirstNoData:false
     }
  
   
    this._onEndReached=this._onEndReached.bind(this);
    this._onRefresh=this._onRefresh.bind(this);
    this.page=1;
  }

  componentDidMount() {

    this.getData((sdata=>{
      if(sdata==""&&sdata.length<=0){
        
          return;
      }
      let data=this.state.data;
      let sumData= data.concat(sdata)
        this.setState({
            dataSource: this.state.dataSource.cloneWithRows( sumData),
            isLoading: false,
            data:sumData
          });
      }))
     
   
  }
 _onRefresh(){
    this.page=1;
    this.setState({
        isNoData:false,
        isLoadingMoreData:false
    })
    this.getData(data=>{
     
        this.props.actionRefresh(data);
    })
    
}
 getData(callback){
   
      console.log(this.props.url+"&pageno="+this.page);
            this.setState({
                isRefreshing:true
            })
            axios.get(this.props.url+"&pageno="+this.page)
            .then(respone=>{
                this.page++;
               this.setState({
                    isRefreshing:false,
                    isFirst:false,
                    isLoading:false
                })
                console.log("callback",respone);
              if(respone.result&&respone.result=="ok"&&respone.data.length>0){
                  let data=respone.data;
                
                  callback(respone.data);
               if(respone.maxpage&&(respone.maxpage<this.page)){
                this.setState({
                    isNoData:true,
                   
                })
               }
                  
              }else{
                callback("");
                this.setState({
                    isFirstNoData:true
                })
              }
            }).catch(err=>{
                callback("");
                console.log.log(err)
                this.setState({
                    isRefreshing:false,
                    isFirstNoData:true
                })
            })
    
}

getMoreData(callback){
   console.log(this.props.url+"&pageno="+this.page);
    axios.get(this.props.url+"&pageno="+this.page)
    .then(respone=>{
        this.page++;
       if(respone.result&&respone.result=="ok"&&respone.data.length>0){
            let data=respone.data;
          
            if(respone.maxpage&&(respone.maxpage<this.page)){
                this.setState({
                    isNoData:true
                })
               }
               callback(data);
           }else{
            this.setState({
                isNoData:true
             })
            callback("");
         }
        }).catch(err=>{
          console.log(err)
            callback("");
        })
}
_onEndReached(event){
    console.log("isRefreshing--",this.page>1,this.state.isLoadingMoreData,this.state.isFirst,this.state.isRefreshing,this.state.isNoData);
   if(this.page>1&&!this.state.isLoadingMoreData&&!this.state.isFirst&&!this.state.isRefreshing&&!this.state.isNoData){
        console.log("加载更多数据");
        this.setState({
            isLoadingMoreData:true,
            isLoading: true
        })
        this.getMoreData(sdata=>{
            this.setState({
                isLoadingMoreData:false,
                isLoading: false
            })
            console.log("加载结束");
           
            if(sdata!=""&&sdata.length>0){
              let data=this.state.data;
              let sumData= data.concat(sdata)
              this.setState({
                 dataSource: this.state.dataSource.cloneWithRows(sumData),
                 data:sumData
              })
              //this.props.actionRefresh(this.props.data.concat(data))
            }
           
        })
    }
    
 }

  renderNoData(){
    return <div className="no-data" >
      <img  className="no-data-img" src={require('./icon_nodata.png')}/>
      <p className="no-data-text">无数据</p>
     </div>
  }
  render() {
    const separator = (sectionID, rowID) => (
      <div
        key={`${sectionID}-${rowID}`}
        style={{
          backgroundColor: '#F5F5F9',
          height: 1
       
        }}
      />
    );

   
    return (
      <ListView
        ref={el => this.lv = el}
        dataSource={this.state.dataSource}
        // renderHeader={() => <div style={{height:"10px",backgroundColor:'#e1e1e1'}}></div>}
        renderFooter={() => (<div style={{ padding:"15px 30px", textAlign: 'center' }}>
          {this.state.isLoading? '加载中...' :this.state.isFirstNoData?this.renderNoData():'数据加载完毕'}
        </div>)}
        
        renderRow={this.props.renderItem}
        renderSeparator={separator}
        className="am-list"
        pageSize={4}
        useBodyScroll
        onScroll={() => { console.log('scroll'); }}
        scrollEventThrottle={200}
        onEndReached={this._onEndReached}
        onEndReachedThreshold={100}
      />
    );
  }
}

export default SuperListView